<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell class="channel-van-cell">
      <div slot="title"
        class="title-text">我的频道</div>
      <van-button type="danger"
        round
        plain
        size="mini"
        class="edit-btn"
        @click="isEdit = !isEdit">{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10"
      class='my-grid'>
      <van-grid-item v-for="(item,index) in myChannels"
        :key="index"
        class="grid-item"
        @click="changeOrDel_click(item,index)">
        <van-icon v-show="isEdit && !fixeChannels.includes(item.id)"
          slot="icon"
          name="clear"></van-icon>
        <span slot="text"
          class="text"
          :class="{activeCurrent:myIndex === index}"> {{ item.name }}</span>
      </van-grid-item>
      <!-- /我的频道 -->
      <!-- 频道推荐 -->
      <van-cell>
        <div slot="title"
          class="title-text">频道推荐</div>
      </van-cell>
      <van-grid :gutter="10"
        class='recommend-grid'>
        <van-grid-item v-for="(item,index) in recommendChannels"
          :key="index"
          :text="item.name"
          class="grid-item"
          icon='plus'
          @click="addChannel(item)" />
      </van-grid>
      <!-- /频道推荐 -->
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, setUserChannel, delUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    myIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      allChannels: [], // 存储所有频道列表
      isEdit: false, // 控制编辑状态的显示
      fixeChannels: [0] // 固定频道的id，不允许删除  channel.id === 0 的频道不允许删除
    }
  },
  computed: {
    recommendChannels () {
      // - 遍历所有频道
      // - 对每一个频道都判断：该频道是否属于我的频道
      // - 如果不属于我的频道，则收集起来
      // - 直到遍历结束，剩下来就是那些剩余的推荐频道
      const channels = []
      this.allChannels.forEach(channel => {
        // console.log(channel)
        // find 遍历数组，找到满足条件的元素项，如果没找到则返回undefined
        const ret = this.myChannels.find(myChannel => {
          return channel.id === myChannel.id
        })

        // 如果我的频道中不包括该频道项，则收集到推荐频道中
        if (!ret) {
          channels.push(channel)
        }
      })

      return channels
    },
    ...mapState(['user'])
  },

  created () {
    this.initAllChannels()
  },

  methods: {
    async initAllChannels () {
      try {
        const { data: { data: res } } = await getAllChannels()
        // console.log(res.channels)
        this.allChannels = res.channels
      } catch (err) {
        this.$toast('获取所有频道列表失败', err)
      }
    },
    // 添加频道
    async addChannel (item) {
      // if (this.isEdit) { // 只有在编辑状态才可以进行添加或删除操作
      this.myChannels.push(item)
      // console.log(obj.id)
      // 根据用户登录状态 来选择把数据存到本地还是上传到服务器
      if (this.user) { // 如果用户登录 则发起网络请求
        try {
          await setUserChannel({
            id: item.id,
            seq: this.myChannels.length
          })
        } catch (error) {
          this.$toast('删除失败,请稍后再试', error)
        }
      } else { // 如果用户没有登录 就把数据存储到本地存储中
        setItem('TOUTIAO_CHANNEL', this.myChannels)
      }
      // }
    },
    // 删除频道
    changeOrDel_click (item, index) {
      if (this.isEdit) { // 如果是编辑状态就执行删除
        // 如果点击的是固定频道就 return 出去不执行删除操作
        if (this.fixeChannels.includes(item.id)) {
          return
        }
        this.myChannels.splice(index, 1)
        // 调用封装好的删除频道请求函数
        this.delChannel(item)
        // 删除后更新频道的激活状态(高亮显示)
        if (index <= this.myIndex) {
          // 让激活频道的索引-1
          this.$emit('changeChannel', this.myIndex - 1, true)
        }
      } else { // 如果是非编辑状态就执行切换
        this.$emit('changeChannel', index, false) // 组件通信 子传父 把子组件当前频道索引作为父组件的active来实现频道切换
      }
    },
    // 封装删除频道的请求
    async delChannel (item) {
      if (this.user) { // 如果用户登录 则发起网络请求
        try {
          await delUserChannel(item.id)
        } catch (error) {
          console.log(error)
        }
      } else { // 如果用户没有登录 就把数据存储到本地存储中
        setItem('TOUTIAO_CHANNEL', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  .channel-van-cell {
    // align-items: center;
    .van-cell__value {
      bottom: 15px;
    }
  }
  padding: 85px 0;
  .channel-edit {
    padding: 85px 0;

    .title-text {
      font-size: 32px;
      color: #333333;
    }

    .edit-btn {
      width: 104px;
      height: 48px;
      font-size: 26px;
      color: #f85959;
      border: 1px solid #f85959;
    }
  }
  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      .van-grid-item__icon-wrapper {
        position: unset;
      }
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text,
      .text {
        font-size: 28px;
        color: #222;
        margin-top: unset;
      }
    }
  }

  /deep/ .recommend-grid {
    padding-left: unset;
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0;
        }
      }
    }
  }
  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
      .activeCurrent {
        color: orange;
      }
    }
  }
}
</style>
